<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
  </head>
  <body>
    <div id="app">我是原本的内容</div>
    <script>
      /* 
      render方法:
        * 使用createRoot方法创建一个根容器对象
        * 这个对象内部有一个render方法,主要用来把render方法接受的组件或者虚拟DOM渲染成真实DOM,放在根容器中
        * 当首次调用render方法的时候,容器内的所有DOM元素都会被替换成新渲染的真实DOM
        * 后续如果又调用render方法,会使用react Diffing算法进行高效的更新
    */
      const vDOM = React.createElement("h1", {}, "header");
      const root = ReactDOM.createRoot(document.querySelector("#app"));
      // const root = ReactDOM.createRoot(document.getElementById('app'));
      // const root = ReactDOM.createRoot(document.getElementsByTagName("div")[0]);
      console.log(root);
      root.render(vDOM);
    </script>
  </body>
</html>
